<script setup lang="ts">
import {ElImageViewer, ElSpace} from 'element-plus'
import {ref, PropType, effectScope, watch} from 'vue'
import { propTypes } from '@/utils/propTypes'
import {useEventListener} from "@vueuse/core";
import {throttle} from "lodash-unified";
import {useEventBus} from "@/hooks/event/useEventBus";
import {EVENT_CODE} from './types'

const props = defineProps({
  urlList: {
    type: Array as PropType<string[]>,
    default: (): string[] => []
  },
  zIndex: propTypes.number.def(200),
  initialIndex: propTypes.number.def(0),
  infinite: propTypes.bool.def(true),
  hideOnClickModal: propTypes.bool.def(false),
  teleported: propTypes.bool.def(false),
  show: propTypes.bool.def(false),
  title: propTypes.string.def(""),
  onJump: propTypes.func.def(()=>null),
  onClose: propTypes.func.def(()=>null)
})

// const getBindValue = computed(() => {
//   const propsData: Recordable = { ...props }
//   delete propsData.show
//   return propsData
// })
const getBindValue = ref({})
watch(
  ()=>props.urlList,
  ()=>{
    const propsData: Recordable = { ...props }
    delete propsData.show
    getBindValue.value = propsData
  },
  {
  deep: true,
  immediate: true,
})

const show = ref(props.show)

// 创建监听器，监听按键的左右切换
let keyType = ""
const keydownHandler = throttle((e) => {
  switch (e.code) {
    case EVENT_CODE.left:
      keyType = "prev";
      if (props.urlList.length === 1)switchImg(0)
      break;
    case EVENT_CODE.right:
      keyType = "next";
      if (props.urlList.length === 1)switchImg(0)
      break;
  }
});
const scopeEventListener = effectScope();
scopeEventListener.run(()=>{
  useEventListener(document, "keydown", keydownHandler);
})
const {on, off} = useEventBus()
on("closePreview", ()=>{
  close()
})
const close = () => {
  show.value = false
  props.onClose && props.onClose()
  off("closePreview")
  // 停止监听
  scopeEventListener.stop()
}
const prevIndex = ref(props.initialIndex)
const switchImg = throttle((index: number)=>{
  let into = false
  // 切换到上一组
  if ((keyType === "prev" && prevIndex.value === 0) || props.urlList.length == 1){
    props.onJump && props.onJump(keyType, index)
    into = true
  }
  // 切换到下一组
  if ((keyType === "next" && prevIndex.value === props.urlList.length - 1) || props.urlList.length == 1) {
    props.onJump && props.onJump(keyType, index)
    into = true
  }
  if (!into){
    props.onJump && props.onJump("switch", index)
  }
  prevIndex.value = index
}, 200)
</script>

<template>
  <div>
    <ElImageViewer v-if="show" v-bind="getBindValue" @close="close" @switch="switchImg"/>
    <div class="header">
      <ElSpace>
        <div class="title" v-if="title && show">{{ title }}-第{{prevIndex + 1}}张</div>
      </ElSpace>
    </div>
  </div>
</template>

<style scoped lang="less">
.header{
  position: fixed;
  z-index: 999999;
  opacity: .6;
  color: #FFF;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  .title{
    letter-spacing: 5px;
    background-color: var(--el-text-color-regular);
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 30px;
    margin: 0 10px;
  }
  .btn{
    cursor: pointer;
  }
}
</style>